<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Trasposing columns to rows inside a HTMLDataSet that uses a table.</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.product {
	cursor: pointer;
}
.hover {
	background-color: #FFFFCC;
}
.selected {
	background-color: #CCCCCC;
}
</style>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//
// Create a HTMLDataSet that loads its data from a table with id="productsTable" located in the current file
// The DataSet will use the cells from the first row of data as the headers for the data columns
//
var ds1 = new Spry.Data.HTMLDataSet(null, "sampleTable", {hideDataSourceElement:false, useColumnsAsRows:true});
//-->
</script>
</head>
<body>
<h3>Trasposing columns to rows inside a HTMLDataSet that uses a table.</h3>
<p> There are cases where you want your table to be read left-to-right instead of top-to-bottom. You can achieve this by passing
  {useColumnsAsRows:true} optional parameter. </p>
<hr />
<p> Here's the constructor code for the DataSet used in the sample. </p>
<pre>
	var ds1 = new Spry.Data.HTMLDataSet(null, &quot;sampleTable&quot;, {hideDataSourceElement:false, useColumnsAsRows:true});
</pre>
<p> Table using spry references. The columns from the original table are now used as rows. </p>
<div spry:region="ds1">
  <table  border="1" cellspacing="0" cellpadding="10">
    <thead>
      <tr>
        <th>Developer Name</th>
        <th>Home</th>
        <th>Work</th>
        <th>Mobile</th>
      </tr>
    </thead>
    <tbody spry:repeatchildren="ds1">
      <tr>
        <td>{Developers/Phones}</td>
        <td>{Home}</td>
        <td>{Work}</td>
        <td>{Mobile}</td>
      </tr>
    </tbody>
  </table>
</div>
<br/>
<!--  TABLE SOURCE -->
<p> Original source table. This is not hidden by the HTMLDataSet because optional parameter {hideDataSourceElement:false} is passed 
  to the constructor. </p>
<table id="sampleTable" border="1" cellspacing="0" cellpadding="10">
  <tr>
    <td><strong>Developers/Phones</strong></td>
    <td><strong>John</strong></td>
    <td><strong>Andrew</strong></td>
    <td><strong>Henry</strong></td>
  </tr>
  <tr>
    <td><strong>Home</strong></td>
    <td>331-3291</td>
    <td>331-3292</td>
    <td>331-3293</td>
  </tr>
  <tr>
    <td><strong>Work</strong></td>
    <td>332-3291</td>
    <td>332-3292</td>
    <td>332-3293</td>
  </tr>
  <tr>
    <td><strong>Mobile</strong></td>
    <td>333-3291</td>
    <td>333-3292</td>
    <td>333-3293</td>
  </tr>
</table>
</body>
</html>
